/* eslint-disable max-lines-per-function */
import React, {useState} from 'react';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Select, DatePicker, Button, Col} from 'antd';
import moment from 'moment';
import {connect} from 'react-redux';

import 'moment/locale/zh-cn';
import searchParam from '~/model/searchParam';
import {TIME_MEASURE_DATA} from '~/utils/const';
import {popUpContainer} from '../utils';
import ServiceLineAndApplication from './serviceLineAndApplication';
import './header.styl';

const {Option} = Select;
const {WeekPicker} = DatePicker;
moment.locale('zh-cn');
function Header(props) {
    // 业务线和应用数据
    const {
        serviceLine,
        serviceLineList,
        application,
        applicationList,
        setServiceLine,
        setServiceLineList,
        setApplication,
        setApplicationList,
        setDateRange,
        getRankList,
        timeType,
        setTimeType,
        getFieldDecorator,
        setFieldsValue,
        resetFields,
        setRankList
    } = props;

    // redux
    const {dispatch: reduxDispatch} = props;

    // 时间选择相关逻辑
    const [datePickerVal, setDatePickerVal] = useState(moment().subtract(1, 'day'));
    const [weekPickerVal, setWeekPickerVal] = useState(moment().week(Number));
    function handleTimeMeasureChange(val) {
        const time = val || TIME_MEASURE_DATA.DAY;
        setTimeType(time);
        if (val === TIME_MEASURE_DATA.DAY) {
            setDatePickerVal(moment());
            setDateRange([moment(), moment()]);
        }
        setWeekPickerVal(moment().week(Number));
        setDateRange([moment().week(Number), moment().week(Number)]);
    }
    function onDateChange(date, dateString) {
        setFieldsValue({dateStr: date});
        setDatePickerVal(date);
        setDateRange([date, date]);
    }
    // 日期插件：当前日期和大于当前日期的不可选择
    function getDateDisabledTime(date) {
        return date && date > moment().startOf('day');
    }

    function onWeekChange(date, dateString) {
        setFieldsValue({dateStr: date});
        setWeekPickerVal(date);
        setDateRange([date, date]);
    }
    // 查询按钮
    function search() {
        const param = {
            business: serviceLine,
            businessList: serviceLineList,
            project: application,
            projectList: applicationList,
            path: null,
            pathList: []
        };
        reduxDispatch(searchParam.setInfo({
            system: 'rank',
            data: param
        }));
        getRankList();
    }

    // 重置按钮
    function reset() {
        // redux search
        reduxDispatch(searchParam.reset('rank'));

        resetFields();
        setTimeType(TIME_MEASURE_DATA[0].key);
        setDateRange([moment().subtract(1, 'day'), moment().subtract(1, 'day')]);
        setDatePickerVal(moment().subtract(1, 'day'));
        setServiceLine('');
        setApplication('');
        setRankList([]);
    }

    return (
        <div className="pages-performance-rank-header">
            <div className="info-section">
                <span className="title">页面时长查询</span>
                <span className="description">数据更新时间为T+1</span>
                <hr className="line" />
            </div>
            <div className="check-condition">
                <div className="item">
                    <div style={{marginTop: 4}}>
                        <span className="name">日期</span>
                        <Select
                            className="timeSelector"
                            value={timeType}
                            style={{width: 120}}
                            getPopupContainer={popUpContainer}
                            onChange={handleTimeMeasureChange}
                        >
                            {TIME_MEASURE_DATA.map(time => (
                                <Option key={time.key} value={time.key}>
                                    {time.value}
                                </Option>
                            ))}
                        </Select>
                    </div>
                    <Form.Item>
                        {getFieldDecorator('dateStr', {
                            initialValue: moment(),
                            rules: [
                                {
                                    required: true,
                                    message: '请选择日期!',
                                },
                            ],
                        })(
                            <div style={{minWidth: 200}}>
                                {
                                    timeType === 1
                                        ? (
                                            <DatePicker
                                                onChange={onDateChange}
                                                value={datePickerVal}
                                                disabledTime={getDateDisabledTime}
                                                getCalendarContainer={popUpContainer}
                                                allowClear={false}
                                                style={{width: 180}}
                                            />
                                        )
                                        : (
                                            <WeekPicker
                                                onChange={onWeekChange}
                                                value={weekPickerVal}
                                                getCalendarContainer={popUpContainer}
                                                allowClear={false}
                                                style={{width: 180}}
                                            />
                                        )
                                }
                            </div>
                        )}
                    </Form.Item>
                </div>
                <ServiceLineAndApplication
                    serviceLine={serviceLine}
                    serviceLineList={serviceLineList}
                    application={application}
                    setApplication={setApplication}
                    applicationList={applicationList}
                    setServiceLineList={setServiceLineList}
                    setApplicationList={setApplicationList}
                    setServiceLine={setServiceLine}
                    getFieldDecorator={getFieldDecorator}
                    setFieldsValue={setFieldsValue}
                    resetFields={resetFields}
                />
            </div>
            <div className="condition-button">
                <Button type="primary" className="check-button" onClick={search}>查询</Button>
                <Button onClick={reset}>重置</Button>
            </div>
        </div>
    );
}

export default connect(s => s)(Header);
